<template>
    <!-- 联系人管理 -->
    <div class="contactAdmin">
        <div class="header">联系人管理</div>
        <div class="mainpadding">
            <div class="margin-top3">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="dialogVisible = true"> 新增联系人 </el-button>
            </div>
            <div class="margin-top3"></div>
            <el-table ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%"
                :header-cell-style="tableHeaderColor">
                <el-table-column prop="contactsPhone" label="手机号"></el-table-column>
                <el-table-column prop="contactsName" label="姓名">
                </el-table-column>
                <el-table-column prop="contactsEnterpriseName" label="所属企业" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="edit(scope.row)"> 修改 </el-button>
                        <el-button type="text" size="small" @click="delitem(scope.row.id)"> 删除 </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flexleft padding15 margin-top1" style="justify-content: flex-end;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="params.pageNo" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize"
                    layout="total, prev, pager, next, sizes, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

        <el-dialog :title="form.id ? '修改联系人' : '新增联系人'" :visible.sync="dialogVisible" width="30%"
            :before-close="handleClose">
            <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                <el-form-item label="手机号" prop="contactsPhone">
                    <el-input v-model="form.contactsPhone"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="contactsName">
                    <el-input v-model="form.contactsName"></el-input>
                </el-form-item>
                <el-form-item label="所属企业">
                    <el-input v-model="form.contactsEnterpriseName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" v-if="form.id" @click="editSubmit('form')" size="small">确定</el-button>
                <el-button type="primary" v-if="!form.id" @click="onSubmit('form', 1)" size="small">添加</el-button>
                <el-button type="primary" v-if="!form.id" @click="onSubmit('form', 2)" size="small">保存并继续添加</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { signContactsList, signContactsAdd, signContactsEdit, deleteBatch } from "@/api/userinfo"
import Cookies from 'js-cookie'//获取cookies的信息

export default {
    inject: ['closeloading'],
    data() {
        return {
            dialogVisible: false,//新增联系人对话框
            form: {
                contactsName: "",
                contactsEnterpriseName: "",
                contactsPhone: "",
                id: "",
                userId: Cookies.get('admin_id')
            },
            params: {
                userId: Cookies.get('admin_id'),//用户id//获取cookies中用户id的信息
                pageNo: 1,
                pageSize: 10
            },
            list: [],
            total: 0,
            emtypetxt: "",
            rules: {
                contactsName: [
                    { required: true, message: '请输入联系人姓名', trigger: 'blur' },
                ],
                contactsPhone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' }
                ],
            }
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        getList() {
            signContactsList(this.params).then(res => {
                this.closeloading()
                this.list = res.result.records
                this.total = res.result.total
                if (this.list.length == 0) {
                    this.emtypetxt = '暂无数据'
                }
            }).catch(err => {
                console.log("请求失败", err)
            })
        },
        // 添加联系人
        onSubmit(formName, value) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    signContactsAdd(this.form).then(res => {
                        if (res.code == 200) {
                            if (value == 1) {
                                this.dialogVisible = false
                            }
                            this.form = {
                                contactsName: "",
                                contactsEnterpriseName: "",
                                contactsPhone: "",
                                id: "",
                                userId: Cookies.get('admin_id')

                            }
                            this.$message.success(res.message)
                            this.getList()
                        } else {
                            this.$message.warning(res.message)
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        //修改联系人 
        edit(item) {
            this.dialogVisible = true
            this.form = {
                contactsName: item.contactsName,
                contactsEnterpriseName: item.contactsEnterpriseName,
                contactsPhone: item.contactsPhone,
                id: item.id,
                userId: Cookies.get('admin_id')
            }
        },
        editSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    signContactsEdit(this.form).then(res => {
                        if (res.code == 200) {
                            this.dialogVisible = false
                            this.form = {
                                contactsName: "",
                                contactsEnterpriseName: "",
                                contactsPhone: "",
                                id: "",
                                userId: Cookies.get('admin_id')

                            }
                            this.$message.success(res.message)
                            this.getList()
                        } else {
                            this.$message.warning(res.message)
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        //删除联系人
        delitem(id) {
            this.$confirm('此操作将永久删除改账号信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                deleteBatch(id).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.message);
                        this.getList()
                    } else {
                        this.$message.warning(res.message);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
        handleSizeChange(val) {
            this.params.pagesize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.params.pageNo = val
            this.getList()
        },
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return 'background-color: #f7f8fa;color: #333;font-weight: 400;'
            }
        },
        handleClose(done) {
            done();
        }
    }
}
</script>


<style lang="scss" scoped>
.header {
    height: 50px;
    border-bottom: 1px solid #e4e4e4;
    line-height: 50px;
    padding-left: 30px;
}
</style>